<template>
  <div class="table">
    <box-title :title="'TOP5'+title+'使用情况'"></box-title>

    <div class="table-content">
      <div class="table-row flex table-header main-color">
        <div class="table-row-item main-item">{{title}}</div>
        <div class="table-row-item max100">虚拟机(台)</div>
        <div class="table-row-item max100">CPU(核)</div>
        <div class="table-row-item max100">内存(G)</div>
        <div class="table-row-item max100">存储(T)</div>
      </div>
      <div
        class="table-row flex "
        v-for="i in 5"
        :key="i"
        style="margin-top:10px"
      >
        <div class="table-row-item main-item main-color ellipsis">广东省发展研究中心广东省发展研究中心 </div>
        <div class="table-row-item data-color max100">10000</div>
        <div class="table-row-item data-color max100">10000</div>
        <div class="table-row-item data-color max100">10000</div>
        <div class="table-row-item data-color max100">10000</div>
      </div>
    </div>
  </div>
</template>
  <script>
import boxTitle from "../components/title";
export default {
  props: ["title"],
  components: { boxTitle },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import url("../styles/main.less");
.table {
  // width: 580px;
  flex: 1;
  height: 255px;
  .block-box;
  .bolock-line-l;
  .table-content {
    width: 90%;
    margin-left: 30px;

    .table-header {
      background: #1acaff4d;
      font-size: 14px;
    }

    .table-row {
      width: 100%;
      .main-item {
        min-width: 150px;
      }
      .table-row-item {
        flex: 1;
        padding-left: 20px;
      }
    }
  }
}
</style>